<template>
    <h1>num: {{ num }}</h1>
    <button @click="clickBtn">点击修改 num</button>
</template>

<script>
export default {
    // 专门存储响应式数据
    data() {
        return {
            num: 100,
            msg: "你能看到我吗",
        };
    },
    // 专门存储 我们的 事件函数
    methods: {
        clickBtn() {
            // console.log('点击事件执行')
            // num++    // 报错找不到 num

            // console.log(this)

            /**
             *  同步更新数据, 异步更新视图
             *
             *  因为 vue 中有一个 虚拟 DOM, 我们在 vue 中修改完数据后, vue 不会立即更新 真实DOM
             *      而是会修改虚拟 DOM, 然后将 修改完毕的 虚拟 DOM, 和真实 DOM 做一个对比
             *
             *  目的是为了减少 DOM 的更新
             */
            this.num--;
            console.log("数据: ", this.num);
            // console.log('页面: ', document.querySelector('h1').innerHTML)

            // setTimeout(() => {
            //     console.log("页面: ", document.querySelector("h1").innerHTML);
            // }, 20);

            this.$nextTick(() => {
                console.log('我会等待 真实 DOM 修改完毕后 执行', document.querySelector('h1').innerHTML)
            })
        },
    },
};

// 写到这个位置 没有办法生效
// function clickBtn () {
//     console.log('点击执行')
// }
</script>
